<template>
    <div class="table_container">
      <div class="empty_item" v-if="orderList.length === 0 || this.$store.state.userId === ''">{{emptyTypeName}}</div>
      <div class="order_list" v-else>
        <el-table
                height="700"
                :data="orderList"
                style="width: 100%">
          <el-table-column
                  label="订单号"
                  width="200">
            <template slot-scope="scope">
              <div class="order_id">{{ scope.row.orderId }}</div>
            </template>
          </el-table-column>
          <el-table-column
                  label="商品名称"
                  width="400">
            <template slot-scope="scope">
              <el-col :span="8"><img :src="scope.row.buyProductImg"></el-col>
              <el-col :span="16"><div class="price_name_item">
                <span class="">{{scope.row.productName}}</span>
                <span> {{scope.row.productColor}}</span>
              </div></el-col>
            </template>
          </el-table-column>
          <el-table-column
                  label="单价"
                  width="100">
            <template slot-scope="scope">
              <div class="order_id">{{scope.row.productPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column
                  label="数量"
                  width="100">
            <template slot-scope="scope">
              <div class="order_id">{{scope.row.productNum}}</div>
            </template>
          </el-table-column>
          <el-table-column
                  label="小计"
                  width="100">
            <template slot-scope="scope">
              <div class="order_id">{{scope.row.productNum*scope.row.productPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="handleCommend(scope.$index, scope.row)">去评价</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="bottom">
        <bottom-bar ></bottom-bar>
      </div>

      <el-dialog title="用户评论" :visible.sync="dialogFormVisible">
        <div>
          <el-row>
            <el-col :span="4">
              <div><img :src="nowSelectedCommentOrder.buyProductImg"></div>
            </el-col>
            <el-col :span="8">
              <div class="visable_name">{{nowSelectedCommentOrder.productName}}</div>
              <div class="visable_name">{{nowSelectedCommentOrder.productColor}}</div>
            </el-col>
            <el-col :span="10">
              <div class="visable_name">
                <span>收货地址：</span>
                <span>{{nowSelectedCommentOrder.province}}</span>
                <span>{{nowSelectedCommentOrder.city}}</span>
                <span>{{nowSelectedCommentOrder.area}}</span>
                <span>{{nowSelectedCommentOrder.detail}}</span>
              </div>
            </el-col>
          </el-row>
          <div class="comment_weight">
            <el-row>
              <el-col :span="4"><div>描述相符</div></el-col>
              <el-col :span="10"> <el-rate
                      v-model="commentWeight"
                      show-text>
              </el-rate></el-col>
            </el-row>
            <div class="comment_weight">
              <el-row>
                <el-col>
                  <el-input
                          type="textarea"
                          placeholder="从多个角度评论宝贝，可以帮助更多想买的人"
                          v-model="commentContent"
                          maxlength="50"
                          show-word-limit
                  >
                  </el-input>
                </el-col>

              </el-row>
            </div>

          </div>


        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clickCancel">取 消</el-button>
          <el-button type="primary" @click="clickTrue">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import {request} from "network/request";
  import BottomBar from "../bottomBar/BottomBar";

  export default {
    name: "TableOrderItem",
    components: {BottomBar},
    props: {
      orderList: {},
      emptyTypeName: '',
    },

    data(){
      return{
        dialogFormVisible: false,
        nowSelectedCommentOrder: {},
        commentWeight: 0,
        commentContent: '',
      }
    },


    methods:{
      handleDelete(index, row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
            url: '/product-order/' + row.orderId,
            method: 'delete',

          }).then(res => {
            console.log(res);
          });
          this.orderList.splice(index, 1); //删除orderList
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
          //删除订单

      },
      handleCommend(index, row){
        // 弹出一个输入框， 输入你的评论
        this.dialogFormVisible = true;
        this.nowSelectedCommentOrder = row;

      },

      //点击确认， 设置弹出框和 添加评论到数据库
      clickTrue(){
        this.dialogFormVisible = false;
        // 发送网络请求，添加一级评论
        request({
          url: '/comment',
          method: 'post',
          data: {
            username: this.$store.state.username,
            userId: this.$store.state.userId,
            productId: this.nowSelectedCommentOrder.productId,
            commentMessage: this.commentContent,
            likeLevel: this.commentWeight,
            likeCount: 20,
          }
        }).then(res => {
          console.log(res);
        });
      },
      clickCancel(){
        this.dialogFormVisible = false
      },

    },
  }
</script>

<style scoped>
  .table_container{
    width: 100%;

  }


  .order_id{
    font-size: 12px;
  }

  img{
    width: 80%;
  }
  .price_name_item{
    margin-top: 20%;
  }

  .bottom{
    width: 100%;
    font-size: 14px;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    background-color: #F5F7FA;
    z-index: 999;
  }

  .visable_name{
    margin-top: 20px;
  }

  .comment_weight{
    margin-top: 20px;
  }

</style>
